npx create-next-app@latest sazon-latino --typescript --tailwind
cd sazon-latino
npm install lucide-react
import './globals.css'
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Sazón Latino',
description: 'Recetas ecuatorianas y latinoamericanas tradicionales',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}import Header from '@/components/Header'
import Hero from '@/components/Hero'
import RecipeCard from '@/components/RecipeCard'
import Footer from '@/components/Footer'
import { recipes } from '@/data/recipes'
export default function Home() {
return (
Recetas Destacadas
{recipes.map((recipe) => (
))}
)
}export default function Header() {
return (
)
}export default function Hero() {
return (
Sabores auténticos de Latinoamérica
Descubre recetas tradicionales ecuatorianas, mexicanas,
colombianas, venezolanas, argentinas y peruanas.
)
}import Link from 'next/link'
interface Recipe {
title: string
slug: string
image: string
country: string
}
export default function RecipeCard({ recipe }: { recipe: Recipe }) {
return (
{recipe.country}
{recipe.title}
)
}export default function Footer() {
return (
)
}export const recipes = [
{
title: 'Encebollado Ecuatoriano',
slug: 'encebollado-ecuatoriano',
image:
'https://images.unsplash.com/photo-1547592180-85f173990554?q=80&w=1200',
country: 'Ecuador',
},
{
title: 'Bolón de Verde',
slug: 'bolon-de-verde',
image:
'https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?q=80&w=1200',
country: 'Ecuador',
},
{
title: 'Tacos al Pastor',
slug: 'tacos-al-pastor',
image:
'https://images.unsplash.com/photo-1552332386-f8dd00dc2f85?q=80&w=1200',
country: 'México',
},
]import { recipes } from '@/data/recipes'
export default async function RecipePage({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
const recipe = recipes.find((r) => r.slug === slug)
if (!recipe) {
return Receta no encontrada
}
return (
{recipe.title}
Esta deliciosa receta tradicional forma parte de la gastronomía
latinoamericana y representa sabores auténticos de {recipe.country}.
Ingredientes
Ingredientes ejemplo
Agregar contenido dinámico
Preparación
Paso 1 de preparación.
Paso 2 de preparación.
)
}git init
git add .
git commit -m "inicio sazon latino"
git remote add origin TU_REPOSITORIO
git push -u origin main
Next.js
npm run build
{
"name": "sazon-latino",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"lucide-react": "latest",
"next": "15.0.0",
"react": "18.3.1",
"react-dom": "18.3.1"
},
"devDependencies": {
"@types/node": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"autoprefixer": "latest",
"postcss": "latest",
"tailwindcss": "latest",
"typescript": "latest"
}
}import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
export default config
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #fff7ed;
}
a {
text-decoration: none;
}const categories = [
'Ecuador',
'Perú',
'México',
'Colombia',
'Argentina',
'Venezuela',
]
export default function Categories() {
return (
Categorías
{categories.map((category) => (
{category}
))}
)
}export default function SearchBar() {
return (
)
}import Header from '@/components/Header'
import Hero from '@/components/Hero'
import RecipeCard from '@/components/RecipeCard'
import Footer from '@/components/Footer'
import Categories from '@/components/Categories'
import SearchBar from '@/components/SearchBar'
import { recipes } from '@/data/recipes'
export default function Home() {
return (
Recetas Populares
{recipes.length} recetas
{recipes.map((recipe) => (
))}
)
}export const recipes = [
{
title: 'Encebollado Ecuatoriano',
slug: 'encebollado-ecuatoriano',
image:
'https://images.unsplash.com/photo-1547592180-85f173990554?q=80&w=1200',
country: 'Ecuador',
},
{
title: 'Bolón de Verde',
slug: 'bolon-de-verde',
image:
'https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?q=80&w=1200',
country: 'Ecuador',
},
{
title: 'Hornado Quiteño',
slug: 'hornado-quiteno',
image:
'https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=1200',
country: 'Ecuador',
},
{
title: 'Fanesca Tradicional',
slug: 'fanesca-tradicional',
image:
'https://images.unsplash.com/photo-1529042410759-befb1204b468?q=80&w=1200',
country: 'Ecuador',
},
{
title: 'Tacos al Pastor',
slug: 'tacos-al-pastor',
image:
'https://images.unsplash.com/photo-1552332386-f8dd00dc2f85?q=80&w=1200',
country: 'México',
},
{
title: 'Lomo Saltado',
slug: 'lomo-saltado',
image:
'https://images.unsplash.com/photo-1601050690597-df0568f70950?q=80&w=1200',
country: 'Perú',
},
{
title: 'Bandeja Paisa',
slug: 'bandeja-paisa',
image:
'https://images.unsplash.com/photo-1544025162-d76694265947?q=80&w=1200',
country: 'Colombia',
},
{
title: 'Empanadas Argentinas',
slug: 'empanadas-argentinas',
image:
'https://images.unsplash.com/photo-1627308595229-7830a5c91f9f?q=80&w=1200',
country: 'Argentina',
},
{
title: 'Arepas Venezolanas',
slug: 'arepas-venezolanas',
image:
'https://images.unsplash.com/photo-1619740455993-9e612b1af08a?q=80&w=1200',
country: 'Venezuela',
},
]import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
],
},
}
export default nextConfig
app/sitemap.ts
import { MetadataRoute } from 'next'
import { recipes } from '@/data/recipes'
export default function sitemap(): MetadataRoute.Sitemap {
const baseUrl = 'https://sazonlatino.com'
const recipeUrls = recipes.map((recipe) => ({
url: `${baseUrl}/recetas/${recipe.slug}`,
lastModified: new Date(),
}))
return [
{
url: baseUrl,
lastModified: new Date(),
},
...recipeUrls,
]
}app/robots.ts
import { MetadataRoute } from 'next'
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
},
sitemap: 'https://sazonlatino.com/sitemap.xml',
}
}Next.js
npm run build
.next
npm install
npm run dev
http://localhost:3000